<template>
  <view class="container">
    <view class="my">
      <view class="my_bg" :style="{backgroundImage: `url(${'/static/my/avatar.jpg'})`}"></view>
      <view class="my_main">
        <view class="my_user">
          <view class="my_user_left">
            <image class="my_user_image" :src="'/static/my/avatar.jpg'"></image>
            <view>小包子</view>
          </view>
          <button class="my_user_left_btn flex-center" @click="gotoStudy">学习报告</button>
        </view>
        <view class="my_ranking">
          <view class="my_ranking_left">
            <text>总学习</text>
            <view>
              <view>119</view>
              <text>分钟</text>
            </view>
          </view>
          <view class="my_ranking_right">
            第{{state.rankWhich}}名
            <uv-icon name="arrow-right" color="#fff"></uv-icon>
          </view>
        </view>
        <view class="my_content">
          <view class="my_content_box">
            <view>今日学习（分钟）</view>
            <text>0</text>
          </view>
          <view class="my_content_box">
            <view>连续学习（天）</view>
            <text>0</text> 
          </view>
          <view class="my_content_box">
            <view>完成课程（节）</view>
            <text>0</text>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="main_title">
        学习记录
      </view>
      <view class="main_box" v-for="(item,index) in list" :key="index">
        <image :src="item.image" lazy-load mode=""></image>
        <view class="main_box_content">
          <view class="main_box_head">{{item.title}}</view>
          <view class="main_box_des ellipsis">{{item.des}}</view>
          <view class="main_box_footer">
            <view>
              <image src="/static/image/yinpin.png" mode=""></image>
              {{item.kecheng}}
            </view>
            <button>去学习</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { reactive, ref } from 'vue';

  const state = reactive({
    rankWhich: 100
  })
  const list = ref([
    {
      image: '/static/taotaitupian/wangyesheji.png',
      title: '7天速成精品课？',
      des: '此处为课程描述，很多很多很多多很多很多很...很多很...',
      kecheng: '雅思高分第一课',
    }, {
      image: '/static/taotaitupian/wangyesheji.png',
      title: '7天速成精品课？',
      des: '此处为课程描述，很多很多很多多很多很多很...很多很...',
      kecheng: '雅思高分第二课',
    }, {
      image: '/static/taotaitupian/wangyesheji.png',
      title: '7天速成精品课？',
      des: '此处为课程描述，很多很多很多多很多很多很...很多很...',
      kecheng: '雅思高分第三课',
    },
  ])
  const getList = () => {
    list.value.push({
      image: '/static/taotaitupian/wangyesheji.png',
      title: '7天速成精品课？',
      des: '此处为课程描述，很多很多很多多很多很多很...很多很...',
      kecheng: '雅思高分第一课',
    })
    list.value.push({
      image: '/static/taotaitupian/wangyesheji.png',
      title: '7天速成精品课？',
      des: '此处为课程描述，很多很多很多很多很.多很多很多很.....',
      kecheng: '雅思高分第一课',
    })
    list.value.push({
      image: '/static/taotaitupian/wangyesheji.png',
      title: '7天速成精品课？',
      des: '此处为课程描述，很多很多很多很多很多很...多很多很...',
      kecheng: '雅思高分第一课',
    })
    uni.stopPullDownRefresh()
  }
  const params = reactive({
    pageIndex: 1,
    pageSize: 10
  })
  const gotoStudy = () => {
    uni.navigateTo({
      url: `/pages/studyReport/studyReport`
    })
  }
  onReachBottom(() => {
    params.pageIndex++
    getList()
  })
  onPullDownRefresh(() => {
    params.pageIndex = 1
    list.value = []
    getList()
  })
  
  onLoad(() => {

  })
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 750rpx;

    .my {
      width: 750rpx;
      height: 570rpx;
      position: relative;
      color: #fff;

      &_bg {
        filter: blur(3px);
        background-size: 100% 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::after {
          content: '';
          width: 100%;
          height: 100%;
          background-color: #6a6a6a;
          opacity: .3;
          position: absolute;
          z-index: 1;
        }
      }

      &_main {
        position: absolute;
        z-index: 2;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        color: #fff;
        padding: 20rpx 30rpx 40rpx;
        box-sizing: border-box;
      }

      &_user {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &_left {
          display: flex;
          align-items: center;
          flex: 1;
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;

          .my_user_image {
            margin-right: 12rpx;
            width: 80rpx;
            height: 80rpx;
            background: #969696;
            border-radius: 40rpx;
            border: 1px solid #E4E4E4;
          }

          &_btn {
            width: 150rpx;
            height: 46rpx;
            background: linear-gradient(180deg, #FF973A 0%, #FF6A3C 100%, );
            border-radius: 23rpx;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            white-space: nowrap;

            &:active {
              transform: translateY(2px);
            }
            &:hover {
              transform: translateY(2px);
            }
          }
        }
      }

      &_ranking {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 50rpx 0 60rpx;

        &_left {
          >text {
            font-weight: 500;
            font-size: 24rpx;
          }

          >view {
            margin-top: 25rpx;
            display: flex;
            align-items: flex-end;
            font-weight: bold;
            font-size: 40rpx;

            >text {
              font-weight: 400;
              font-size: 20rpx;
              margin-left: 8rpx;
              padding-bottom: 8rpx;
            }
          }
        }

        &_right {
          display: flex;
        }
      }

      &_content {
        display: flex;
        justify-content: space-between;

        &_box {
          font-weight: bold;
          font-size: 36rpx;
          color: #FFFFFF;

          view {
            font-weight: 400;
            font-size: 24rpx;
            color: #EEEEEE;
            margin-bottom: 15rpx;
          }
        }
      }



    }

    .main {
      flex: 1;
      width: 750rpx;
      background: #FFFFFF;
      border-radius: 30rpx 30rpx 0rpx 0rpx;
      margin-top: -50px;
      position: relative;
      z-index: 9;
      padding: 50rpx 30rpx;
      box-sizing: border-box;

      &_title {
        font-weight: bold;
        font-size: 36rpx;
        color: #333333;
        margin-bottom: 30rpx;
      }

      &_box {
        display: flex;
        width: 100%;
        border-bottom: 1px solid rgba(#000, .1);
        margin-bottom: 30rpx;
        padding-bottom: 40rpx;
        box-sizing: border-box;

        &:last-child {
          border: 0;
          padding: 0;
          margin-bottom: 0;
        }

        >image {
          width: 240rpx;
          height: 160rpx;
          background: #999999;
          border-radius: 8rpx;
          margin-right: 20rpx;
        }

        &_content {
          width: 430rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        &_head {
          font-weight: bold;
          font-size: 30rpx;
          color: #333333;
        }

        &_des {
          font-size: 24rpx;
          color: #666666;
          margin-bottom: 20rpx;
        }

        &_footer {
          display: flex;
          justify-content: space-between;

          >view {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            color: #333333;
          }

          image {
            width: 27rpx;
            height: 30rpx;
            margin-bottom: -2rpx;
            margin-right: 10rpx;
          }

          button {
            width: 109rpx;
            height: 46rpx;
            background: #218CFE;
            border-radius: 23rpx;
            font-size: 24rpx;
            color: #FFFFFF;
            display: flex;
            justify-content: center;
            align-items: center;
            white-space: nowrap;
            margin: 0;
          }
        }
      }
    }
  }
</style>